<template>
	<view :style="viewColor">
		<view class="address-window popup-main bg-f on" style="height:100vh " >
			<view class="search-block" style="z-index: 1000;">
			    <view class='search acea-row row-between-wrapper'>
					<view class='input acea-row row-between-wrapper'>
						<text class='iconfont icon-ic_search mr-10'></text>
						<input type='text' :value='keyword' 
						:focus="focus" placeholder='请输入关键词搜索' 
						placeholder-class='placeholder'  @input="searchAddress"
						maxlength="20"></input>
					</view>
					<view class="text-16 color-66" @click="close">
						取消
					</view>
				</view>
			</view>
			<view v-if="resultList.length" class="search-block">
				<view  v-for="(item,index) in resultList" :key="index" class="search-item display-flex display-flex-align-center" @click="selectAddress(item)">
					<image src="../../static/images/location.png" style="width:20px;height:20px;margin-right:6px; margin-bottom: 8px;"></image>
					<view class="search-info">
						<view class="display-flex display-flex-justify-space-between">
							<view><text>{{item.name}}</text></view>
						</view>
						<view class="search-detail line-ellipsis">{{item.district}}</view>
						<view class="bline"></view>
					</view>
				</view>
			</view>
			<view v-else class="pt-100" >
				<emptyPage title="请换个关键词试试吧" ></emptyPage>
			</view>
		</view>
		<view class='mask' catchtouchmove="true" :hidden='display==false' @tap='close'></view>
	</view>
</template>

<script>

	import {
		searchAddress
	} from '@/api/api.js';
	import emptyPage from "@/components/emptyPage.vue"
	import { mapGetters } from "vuex";
	import util from "@/utils/util.js";

	const CACHE_ADDRESS = {};	
	export default {
		components: {emptyPage},
		props: {
		
		},
		data() {
			return {
				focus: true,
				keyword:'',
				resultList:[],
				type: 1,
				op: '',
				locCity: ''
			};
		},
		computed:{
			...mapGetters(['viewColor']),
		
		},
		watch:{
		
			display(n){
				
			},
		
		},
		mounted() {
			
		},
		methods: {
			close: function() {
				this.$emit('changeClose');
			},
			searchAddress(e){
				var that = this
			
				this.$set(this, 'keyword', e.detail.value);
				that.focus = false;
				uni.showLoading({
					title: '请稍后...'
				})
				let param = {
					keyword: this.keyword,
					city: uni.getStorageSync('city_select')?uni.getStorageSync('city_select'):'贵阳市',
				}
				searchAddress(param).then(res => {
					uni.hideLoading()
					that.resultList = res.data
					
				}).catch(err => {
					uni.hideLoading()
				})
			  },
			  selectAddress(item){
				  this.$emit('getAddress',item);
			  },
		}
	}
</script>

<style scoped lang="scss">
	
	.search-block{
		background-color: #ffffff;
		padding: 14upx 25upx;
	}
	.search-block .search {
		padding-left: 30rpx;
	}
	
	.search-block .search {
		margin-top: 20rpx;
	}
	
	.search-block .search .input {
		// width: 598rpx;
		// width: 95%;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
	}
	
	.search-block .search .input input {
		width: 472rpx;
		font-size: 28rpx;
	}
	
	.search-block .search .input .placeholder {
		color: #999;
	}
	
	.search-block .search .input .iconfont {
		color: #555;
		font-size: 35rpx;
	}
	
	.search-block .search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #282828;
	}
	
	.search-block .title {
		font-size: 28rpx;
		color: #999;
		margin: 30rpx 30rpx 25rpx 30rpx;
	}
	
	.search-block .title .iconfont {
		font-size: 28rpx;
	}
	
	.searchGood .list {
		padding-left: 10rpx;
	}
	
	.search-block .list .item {
		font-size: 26rpx;
		color: #454545;
		padding: 0 21rpx;
		height: 60rpx;
		border-radius: 3rpx;
		line-height: 60rpx;
		border: 1rpx solid #aaa;
		margin: 0 0 20rpx 20rpx;
	}
	
	.search-block .list .item.history-item {
		height: 50rpx;
		border: none;
		border-radius: 25rpx;
		background-color: #F7F7F7;
		line-height: 50rpx;
	}
	
	.search-block .line {
		border-bottom: 1rpx solid #eee;
		margin: 20rpx 30rpx 0 30rpx;
	}
	.search-item{
		padding: 16upx 0 20upx 10upx;
	}
	.search-info{
		flex:1
	}
	.search-detail{
		width: 560upx;
		margin-top: 4upx;
		font-size: 25upx;
		color: #8F8F94;
	}
	.bline{
		border-bottom: 1rpx solid #eee;
		margin: 20rpx 30rpx 0 0;
	}
</style>
